<#include "../common/header.htm">
<div class="content-wrapper">
<section class="content">
    <div class="row">
        <div class="col-md-2">
            <div class="panel-heading titlet">
                <span class="panel-title titleTex">标题</span>
            </div>
            <div class="panel panel-default">
            
                <div class="panel-group" id="accordion">

                    <div onclick="datalog.query(3)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">服务号码</div>
                    </div>
                    <div onclick="datalog.query(4)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">用户名</div>
                    </div>
                    <div onclick="datalog.query(5)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">服务号码归属地</div>
                    </div>
                    <div onclick="datalog.query(8)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">对方号码 </div>
                    </div>
                    <div onclick="datalog.query(9)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">对方用户名</div>
                    </div>
                    <div onclick="datalog.query(10)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">对方归属地</div>
                    </div>
                    <div onclick="datalog.query(1)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">业务类型</div>
                    </div>
                    <div onclick="datalog.query(2)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">起始时间</div>
                    </div>
                    <div onclick="datalog.query(11)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">通话时长</div>
                    </div>
                    <div onclick="datalog.query(12)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;"> 呼叫类型</div>
                    </div>
                    <div onclick="datalog.query(13)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">LAC</div>
                    </div>
                    <div onclick="datalog.query(14)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">CID</div>
                    </div>
                    <div onclick="datalog.query(15)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">小区地址</div>
                    </div>
                    <div onclick="datalog.query(16)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">MSC</div>
                    </div>
                    <div onclick="datalog.query(17)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">用户所在地</div>
                    </div>
                    <div onclick="datalog.query(6)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">卡号</div>
                    </div>
                    <div onclick="datalog.query(7)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;"> 设备号码</div>
                    </div>
                    <div onclick="datalog.query(18)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">第三方号码</div>
                    </div>
                    <div onclick="datalog.query(19)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">第三方用户名</div>
                    </div>
                    <div onclick="datalog.query(20)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">第三方号码归属地</div>
                    </div>
                    <div onclick="datalog.query(21)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">漫游城市或运营商代码</div>
                    </div>
                    <div onclick="datalog.query(22)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">漫游城市或运营商代码信息</div>
                    </div>
                    <div onclick="datalog.query(23)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">业务键</div>
                    </div>
                    <div onclick="datalog.query(24)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">身份证号</div>
                    </div>
                    <div onclick="datalog.query(25)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">经度</div>
                    </div>
                    <div onclick="datalog.query(26)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">纬度</div>
                    </div>
                    <div onclick="datalog.query(27)" class="panel panel-default">
                        <div class="panel-heading" style="cursor:pointer;">地址</div>
                    </div>

                </div>
        </div>
        </div>
        <div class="col-md-10">
            <div class="titleRight">
                <div class="titlerbt">对应标题头</div>
                <button class="btn btn-primary addtitbtn" data-toggle="modal" data-target="#myModal">新增标题</button>
            </div>
            <!--<div class="col-md-3">
            <input name="selectKey" type="text" class="form-control" placeholder="请输入要搜索的内容">
            </div>
            <div class="col-md-8">
            <button class="btn btn-default" onclick="inquire()">查询</button>
            </div>-->
            <table class="table table-hover table-bordered table-striped" id="tb_customer" style="table-layout: fixed;">
                <thead>
                    <tr>
                        <th data-field="bankTitleName" style="font-size:18px;">对应标题头</th>
                        <th class="caozuo" data-field="caozuo" style="font-size:18px;">操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>     
</section>
    <!-- 模态框（） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">添加标题</h4>
                </div>
                <div class="modal-body">
                    <form id="addtitlepoolform" enctype="multipart/form-data" method="post" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="titleSelect" class="col-sm-5 control-label">请选择对应的标题名称：</label>
                            <div class="col-sm-7">
                                <select name="corresponding" id="titleSelect" class="form-control">
                                    <option value="1">业务类型</option>
                                    <option value="2">起始时间</option>
                                    <option value="3">服务号码</option>
                                    <option value="4" selected = selected>用户名</option>
                                    <option value="5">服务号码归属地</option>
                                    <option value="6">卡号</option>
                                    <option value="7">设备号码</option>
                                    <option value="8">对方号码</option>
                                    <option value="9">对方用户名</option>
                                    <option value="10">对方归属地</option>
                                    <option value="11">通话时长</option>
                                    <option value="12">呼叫类型</option>
                                    <option value="13">LAC</option>
                                    <option value="14">CID</option>
                                    <option value="15">小区地址</option>
                                    <option value="16">MSC</option>
                                    <option value="17">用户所在地</option>
                                    <option value="18">第三方号码</option>
                                    <option value="19">第三方用户名</option>
                                    <option value="20">第三方号码归属地</option>
                                    <option value="21">漫游城市或运营商代码</option>
                                    <option value="22">漫游城市或运营商代码信息</option>
                                    <option value="23">业务键</option>
                                    <option value="24">身份证号</option>
                                    <option value="25">经度</option>
                                    <option value="26">纬度</option>
                                    <option value="27">地址</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-5 control-label">标题名称：</label>
                            <div class="col-sm-7">
                                <input name="titleName" type="text" class="form-control" id="lastname" placeholder="请输标题">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button onclick="saveAddData()" type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
<script src="${ctx}/bower_components/assets/confirm/confirmUtils.js"></script>
<script type="text/javascript">
    $(function () {
        datalog.query($("#titleSelect").val());
    })


    function saveAddData() {
        $.ajax({
            type: "POST",
            url: "${ctx}/phone/title/saveAdd",
            data:$("#addtitlepoolform").serialize(),
            dataType:'json',
            success: function(obj){
                toastr.success(obj.data.msg);
                $("#lastname").val('');
                $('#tb_customer').bootstrapTable("refresh",{
                    url:"${ctx}/phone/title/getTitlePools",
                    query: {'id': $("#titleSelect").val()},
                })
            }
        });
    }
    
    var datalog = {
        query : function (id) {
            $("#titleSelect").val(id);
            var mytab = $('#tb_customer');
            mytab.bootstrapTable('destroy');
            mytab.bootstrapTable({
                url: "${ctx}/phone/title/getTitlePools?id="+id,//数据源
                search: false,//是否搜索
                dataType: "json",//期待返回数据类型
                method: "get",//请求方式
                data_locale: 'zh-CN',
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true,//隔行换色
                columns: [
                    {
                        field: "titleName",
                        title: "对应标题头",
                    },
                    {
                        title: '操作',
                        width: 120,
                        formatter: function (value, row, index) {
                            var result = "";
                            result += '<a onclick="delTitle('+row.id+','+id+')" style="cursor:pointer;">删除</a>';
                            return result;
                        }

                    }
                ],
                /**
                 * @param {点击列的 field 名称} field
                 * @param {点击列的 value 值} value
                 * @param {点击列的整行数据} row
                 * @param {td 元素} $element
                 */
                onDblClickCell: function(field, value, row, $element) {
                    $element.attr('contenteditable', 'true');
                    $element.blur(function() {
                        $element.attr('contenteditable', 'false');
                        var tdValue = $element.html();

                        saveData(row.id , tdValue,row.corresponding);
                    })
                },
                onLoadSuccess:function () {
                    $("#titleSelect option[value="+id+"]").attr("selected", true);
                }
            });
        }

    };
    function delTitle(id,titleid) {
        Ewin.confirm({ message: "确认要删除这条数据吗？" }).on(function (e) {
            if (!e) {
                return;
            }
            $.ajax({
                type: "POST",
                url: "${ctx}/phone/title/delete",
                data:{"id":id,},
                dataType:'json',
                success: function(data){
                    $('#tb_customer').bootstrapTable("refresh",{
                        url:"${ctx}/phone/title/getTitlePools",
                        query: {'id': $("#titleSelect").val()},
                    })
                }
            });
        });
    }

    function saveData(id, value,titleid) {
        $.ajax({
            type: "POST",
            url: "${ctx}/phone/title/saveUpdate",
            data:{"id":id,"titleName":value},
            dataType:'json',
            success: function(obj){
                var data = obj.data;
                $('#tb_customer').bootstrapTable('refresh',{
                    url:"${ctx}/phone/title/getTitlePools",
                    query: {'id': $("#titleSelect").val()},
                });
                if (data.msg=="修改成功") {
                    toastr.success("修改成功");
                }else {
                    toastr.error("没有修改此条记录权限！");
                }
            }
        });
    }

</script>
<style>
    .fixed-table-container {
        border: none;
    }
    td.caozuo {
        text-align: center;
    }
    th.caozuo {
        text-align: center;
    }
    .bootstrap-table .table {
        border-radius: 0;
    }
    .titleRight {
        margin-top: 20px;
    }
    .col-md-10 {
        padding-left: 0px;
    }
    button.btn.btn-primary.addtitbtn {
        float: right;
    }
    .titlerbt {
        display: inline-block;
        font-size: 14px;
        color: #000000;
    }
    .panel-group .panel + .panel{
        margin-top: 0;
    }
    .panel-default>.panel-heading {
        background-color: #fff;
    }
    .panel-group .panel {
        border: 1px solid rgb(221, 221, 221);
        background-color: #ffffff;
        width: 258px;
        height: 35px;
        border-bottom: none;
        border-radius: 0;
    }
    .panel-group .panel+.panel:last-of-type{
        border-bottom: 1px solid rgb(221, 221, 221);
    }
    .panel-heading.titlet {
        margin-top: 20px;
        padding: 0;
    }
    .titleTex {
        font-size: 14px;
        color: #000000;
        font-weight: normal;
    }
    .col-md-2 {
        margin-left: 25px;
        padding-right: 0;
    }
    .btn-primary{
        background-color:#4595ec;
        border-color:#4595ec;
    }
    .btn-primary:hover, .btn-primary:active, .btn-primary.hover{
        background: #61a8f5;
        border-color: #61a8f5;
    }
    .btn-primary.focus, .btn-primary:focus{
        background-color:#4595ec;
        border-color:#4595ec;
    }
    section.content-header {
        margin-top: 17px;
    }
</style>